<template>
    <div class="card-container">
        <div class="car" @click="va">
            <div class="card-wrapper">
                <Card image="https://resource.honcierge.jp/Q99h4FGq3FuAL3uD7JYxhxKt" title="天王星" description="天王星，太阳系内第七颗行星，以蓝色为主色调。" />
            </div>
        </div>
        <div class="car" @click="vba">
            <div class="card-wrapper">
                <Card image="https://pic1.zhimg.com/v2-fc39dbec7e43f15453ae73a1984762f5_b.jpg" title="水星" description="水星是太阳系最小行星，紧邻太阳，温差大，表面陨石坑多，轨道周期最短。" />
            </div>
        </div>
        <div class="car" @click="fg">
            <div class="card-wrapper">
                <Card image="https://tse3-mm.cn.bing.net/th/id/OIP-C.cyoqhvc8C7qYoJ1N6m7ZpAHaHm?rs=1&pid=ImgDetMain" title="地球" description="地球是太阳系中生命之源，拥有丰富的水资源和多样的生态系统。" />
            </div>
        </div>
        <div class="car" @click="jk">
            <div class="card-wrapper">
                <Card image="https://p1.ssl.qhimg.com/t013f5229b3141c0103.jpg" title="金星" description="金星是太阳系中最炎热的行星，因其接近太阳且大气层厚重，表面环境极端。" />
            </div>
        </div>
        <div class="car" @click="ql">
            <div class="card-wrapper">
                <Card image="https://img.zcool.cn/community/016a4657c17c7a0000018c1b2f0fae.jpg@1280w_1l_2o_100sh.jpg" title="木星" description="木星是太阳系最大行星，有着明显的色带和风暴，多颗卫星围绕其旋转。" />
            </div>
        </div>
        <div class="car" @click="iu">
            <div class="card-wrapper">
                <Card image="https://ts1.cn.mm.bing.net/th/id/R-C.940951d9cadfb0d35e6b9bf004138674?rik=sV3SYGxJO3whIA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20115%2f448%2fw1024h1024%2f20190827%2f03e9-icuacsa1259430.jpg&ehk=IdXA6cPZYP9n0DXsAlDmdsvbWjZdjRMos52Dobpd7Z0%3d&risl=&pid=ImgRaw&r=0" title="海王星" description="海王星是太阳系最远行星，呈深蓝色，有着强烈的风暴和环绕其运行的多个卫星。" />
            </div>
        </div>
        <div class="car" @click="sd">
            <div class="card-wrapper">
                <Card image="https://ts1.cn.mm.bing.net/th/id/R-C.10c207a7bbe67f26eef21cda44b990f3?rik=h3L8oiJlsSgeag&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20113%2f448%2fw1024h1024%2f20200705%2fab50-ivwfwmp5839405.jpg&ehk=QOxpVS14ol1Z42B3VNmCRNEmbFH0dKcihmnBAe6w0dI%3d&risl=&pid=ImgRaw&r=0" title="火星" description="红色星球，太阳系第四颗行星，有稀薄大气，多峡谷和沙丘。。" />
            </div>
        </div>
        <div class="car" @click="yu">
            <div class="card-wrapper">
                <Card image="http://astrocloud.china-vo.org/s/2019/20191021_saturn/191007123234_1_900x600.jpg" title="土星" description="土星有着明亮的星环，其特征是显著的色带和巨大的风暴。" />
            </div>
        </div>
    </div>
</template>  
 
<script>
import Card from './Card.vue';


export default {
    name: 'ParentComponent',
    components: {
        Card,

    },

    methods: {
        va() {
            this.$router.push({ name: 'tianwang' });
        },
        vba(){
            this.$router.push({ name: 'shuixing' });
        },
        fg(){
            this.$router.push({ name: 'diqiu' });
        },
        jk(){
            this.$router.push({ name: 'jinxing' });
        },
        ql(){
            this.$router.push({ name: 'tuxing' });
        },
        iu(){
            this.$router.push({ name: 'haiwang' });
        },
        yu(){
            this.$router.push({ name: 'tuxing' });
        },
        sd(){
            this.$router.push({ name: 'huoxing' });
        }
    }

};

</script>
<style scoped>  .card-container {
      display: flex;
      flex-wrap: wrap;
      margin-left: 150px;
      /* 如果需要的话，可以保留这个外边距 */
      justify-content: flex-start;
      gap: 80px;
      /* 卡片之间的间隙 */
      padding: 20px;
      /* 容器内边距 */
  }
.car:hover{
    text-shadow: 15px 15px 10px rgba(0, 0, 0, 0.5);
}
  .card-wrapper {
      flex-basis: calc(25% - 20px);
      /* 调整这个值以确保四个卡片一行，同时考虑间隙 */
      margin-bottom: 20px;
      /* 卡片之间的垂直间隙，与水平间隙保持一致 */
  }</style>